<template>
	<view class="beijingse mainpadding">
		<textarea class=" textarea radius mainpadding ffffff " maxlength="500" placeholder="请输入您要反馈的问题（5-500字以内）"
			v-model="des"></textarea>
		<view class="ffffff radius mainpadding margin_top">
			<view class="nostrongtext">请提供问题的截图或照片（选填）</view>
			<view class="flexleft flex_wrap">
				<view class="itemimgBox flexcenter margin_top2" v-for="(item,index) in images_text" :key="index">
					<!-- 已上传 -->
					<view class="listleftimg">
						<image class="listleftimg radius" :src="item" mode=""></image>
						<view class="shanchu" @click="deleteimg(images,images_text,index)"></view>
					</view>
				</view>
				<view class="itemimgBox flexcenter margin_top2" @click="uploadImg(4,images,images_text)"
					v-if="images_text.length!=4">
					<!-- 未上传 -->
					<view class="huibox listleftimg"></view>
				</view>
			</view>
		</view>
		<view class="margin_top ffffff radius mainpadding flexbetween">
			<view class="nostrongtext">联系方式</view>
			<input class="inputs" type="text" placeholder="请输入手机号" v-model="mobile">
		</view>
		<view class="xiaobtn" @click="yijfk" v-if="btnflag">提交</view>
		<view class="xiaobtn" v-if="!btnflag">提交</view>
		<view class="margin_top titletext wzxhx textcenter" @click="tzlsfk">历史反馈</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				des: "",
				images: [],
				images_text: [],
				mobile: "",
				btnflag: true,
			}
		},
		methods: {
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			// 提交意见反馈
			yijfk() {
				let mobile = this.mobile;
				let des = this.des;
				if (des == "") {
					httpRequest.toast("请输入反馈的问题")

					return false
				}
				if (mobile == "") {
					httpRequest.toast("请输入手机号")

					return false
				}
				if (!this.isMobile(mobile)) {
					httpRequest.toast("手机号输入有误")

					return false
				}
				if (des.length < 5) {
					httpRequest.toast("请输入内容不低于5个字")

					return false
				}
				if (des.length > 500) {
					httpRequest.toast("请输入内容不大于500个字")

					return false
				}
				this.btnflag = false
				httpRequest.request('/api/user/addFeddback', 'POST', {
					// 传参
					mobile: this.mobile,
					des: this.des,
					images: this.images.join()
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							this.btnflag = true
							uni.navigateBack(1)
						}, 1000)
					} else {
						this.btnflag = true
					}
				})
			},
			uploadImg(value, upImgs, upImgs_text) {
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			deleteimg(upImg,upImgs_text,index){
				upImg.splice(index,1)
				upImgs_text.splice(index,1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url);
					upImgs_text.push(image_item);
			
				}).catch(err => {});
			},
			// 跳转历史反馈
			tzlsfk() {
				uni.navigateTo({
					url: '/pages_wode/lishifankui'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wzxhx {
		text-decoration: underline;
	}

	.inputs {
		width: 75%;
	}

	.xiaobtn {
		width: 372rpx;
		margin: 60rpx auto 0;
		height: 82rpx;
		display: flex;
		border-radius: 40rpx;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #FF9341;
	}

	

	.huibox {
		width: 147rpx;
		height: 147rpx;
		background-size: 100% 100%;
		background-image: url('../static/images/system/upimg.png');
		border-radius: 10rpx;
	}

	.shanchu {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 0;
		right: 0;
		background-size: 100% 100%;
		background-image: url('../static/images/system/shanchu1.png');
	}

	.tupian {
		width: 147rpx;
		height: 147rpx;
		border-radius: 14rpx;

		image {
			width: 147rpx;
			height: 147rpx;
			border-radius: 14rpx;
		}
	}

	.textarea {
		width: 100%;
		box-sizing: border-box;
	}
</style>